<template>
  <div>
    <el-main class="task-form" style="margin-bottom: 10px;">
<el-button
  type="primary"
  style="margin-left: 10px"
  @click="phoneClick"
  >创建手机
</el-button>
<el-button
            link
            style="margin-left: 10px"
            >
            <el-icon style="font-size: 30px;" @click="search"><Refresh /></el-icon>
          </el-button>
</el-main>
    <el-container>
      <el-main class="task-form">
        <div>
          <el-table
            :data="form.tableData"
            style="width: 100%"
            :header-cell-style="tableHeaderColor"
          >
          <el-table-column
              align="center"
              prop="id"
              label="ID"
            />
            <el-table-column
              align="center"
              prop="phone_number"
              label="编号"
            />
            <el-table-column
              align="center"
              prop="video_task_number"
              label="待抓取视频数	"
            />
            <el-table-column
              align="center"
              prop="chat_task_number"
              label="待私信数	"
            />
            <el-table-column
              align="center"
              prop="last_crawl"
              label="最后一次抓取视频时间	"
            />
            <el-table-column
              align="center"
              prop="last_chat"
              label="最后一次私信时间	"
            />
            <el-table-column
              align="center"
              prop="create_time"
              label="创建时间"
            />
          </el-table>
        </div>
        <div class="pagination-block">
          <el-pagination
            background
            v-model:current-page="form.page"
            v-model:page-size="form.page_size"
            :page-sizes="[10, 30, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="form.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <el-dialog
      :width="'500px'"
      v-model="form.phoneVisible"
      title="新建手机"
      :close-on-click-modal="false"
      @close="phoneHandler('cancel')"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="手机号" required>
          <el-input
            size="large"
            style="width: 200px; margin-right: 10px"
            v-model="form.phone_number"
            placeholder="请输入手机号"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="position: relative">
          <span class="dialog-footer">
            <el-button @click="phoneHandler('cancel')">取消</el-button>
            <el-button type="primary" @click="phoneHandler('confirm')">
              确定
            </el-button>
          </span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts"></script>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { UploadFilled, Close,Refresh } from "@element-plus/icons-vue";
import { ElMessage, ElLoading } from "element-plus";
import { UploadProps } from "element-plus";
import { useRouter } from "vue-router";
import { nextTick } from "process";
import moment from "moment";
import {
  getPhoneCreate,
  getPhoneList,
} from "@/api/phone";
const router = useRouter();
const { currentRoute } = router;
const form = reactive({
  phoneVisible: false,
  tableData: [],
  page: 1,
  page_size: 10,
  total: 0,
  phone_number: ""
});
const dateFormat = (row, column) => {
  const date = row[column.property];

  if (date == undefined) {
    return "";
  }

  return moment(date * 1000).format("YYYY-MM-DD");
};
const search = () => {
  form.page = 1;
  getDataList();
};
const phoneClick = val => {
  form.phoneVisible = true;
};
const phoneHandler = async val => {
  if (val == "confirm") {
    if (form.phone_number == "") {
      return ElMessage.warning("请输入手机号");
    }
    const res = await getPhoneCreate({
      phone_number: form.phone_number
    });
    if (res.code == 0) {
      ElMessage.success("新增成功");
      form.page = 1;
      getDataList();
      form.phone_number = "";
      form.phoneVisible = false;
    }
  } else {
    form.phone_number = "";
    form.phoneVisible = false;
  }
};
const handleSizeChange = val => {
  form.page_size = val;
  getDataList();
};
const handleCurrentChange = val => {
  form.page = val;
  getDataList();
};
const getDataList = async () => {
  const res = await getPhoneList({
    page: form.page,
    page_size: form.page_size
  });
  if (res.code == 0) {
    form.tableData = res.data.list;
    form.total = res.data.total;
  }
};
const tableHeaderColor = data => {
  // console.log(data);
  if (data.rowIndex === 0) {
    return { background: "#f9f8fa", color: "#909399", textAlign: "center" };
  }
};
getDataList();
</script>
<style lang="scss" scoped>
.app-main {
  width: 100%;
  min-height: calc(100vh - 64px);
}

.task-form {
  background-color: #fff;
}

.pagination-block {
  display: flex;
  justify-content: right;
  margin: 20px 0 0;
}

.PasswordContent {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
